<template>
  <BaseDialog
    v-bind="$attrs"
    width="50"
    :footer="true"
    class="link"
    :title="domainInfo.id ? '编辑' : '添加'"
    @submit="handleSubmit"
    v-on="$listeners"
  >
    <el-form
      ref="formRef"
      class="addForm"
      :rules="rules"
      :model="formData"
      label-position="top"
    >
      <el-form-item label="域名" prop="domain">
        <el-input v-model="formData.domain" placeholder="请输入域名" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model="formData.desc"
          placeholder="请输入描述"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="持有者" prop="holder_name">
        <el-input v-model="formData.holder_name" placeholder="请输入持有者" />
      </el-form-item>
      <el-form-item label="注册商" prop="registrants">
        <el-input v-model="formData.registrants" placeholder="请输入注册商" />
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model="formData.price" placeholder="请输入价格" />
      </el-form-item>
      <el-form-item label="注册时间" prop="register_date">
        <el-date-picker
          v-model="formData.register_date"
          type="datetime"
          :placeholder="$t('请选择日期时间')"
        />
      </el-form-item>
      <el-form-item label="过期时间" prop="expire_date">
        <el-date-picker
          v-model="formData.expire_date"
          type="datetime"
          :placeholder="$t('请选择日期时间')"
        />
      </el-form-item>
    </el-form>
  </BaseDialog>
</template>

<script>
import domainApi from '@/api/domain'
export default {
  props: {
    domainInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rules: {
        domain: {
          required: true,
          message: '请输入域名',
          trigger: 'input'
        }
      },
      formData: {}
    }
  },
  watch: {
    domainInfo: {
      handler(val) {
        this.formData = { ...val }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async handleSubmit() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null
        if (this.formData.id) {
          result = await domainApi.editDomain(this.formData)
        } else {
          result = await domainApi.addDomain(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$emit('update:dialogShow', false)
          this.$emit('success')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addForm {
  ::v-deep .el-date-editor.el-input {
    width: 100%;
  }
}
</style>
